<template>
  <div>
    <button @click="exportStyledPdf">导出为PDF</button>
    <h1 align="center">机动车检验合格标志</h1>
    <div ref="contentToConvert">
      <!-- 确保这里有 ref -->
      <h2 align="center">(电子凭证)</h2>
      <div class="form-group" style="overflow: hidden; border: 1px solid #ccc; padding: 10px">
        <a style="float: left"><b>检验有效期</b></a>
        <text style="float: right">{{ formData.youxiaoqi }}</text>
      </div>
      <div class="form-group" style="overflow: hidden; border: 1px solid #ccc; padding: 10px">
        <a style="float: left"><b>车牌号码</b></a>
        <text style="float: right">{{ formData.chepai }}</text>
      </div>
      <div class="form-group" style="overflow: hidden; border: 1px solid #ccc; padding: 10px">
        <a style="float: left"><b>使用性质</b></a>
        <text style="float: right">{{ formData.xingzhi }}</text>
      </div>
      <div class="form-group" style="overflow: hidden; border: 1px solid #ccc; padding: 10px">
        <a style="float: left"><b>车辆类型</b></a>
        <text style="float: right">{{ formData.leixing }}</text>
      </div>
      <div class="form-group" style="overflow: hidden; border: 1px solid #ccc; padding: 10px">
        <a style="float: left"><b>检验机构</b></a>
        <text style="float: right">{{ formData.jigou }}</text>
      </div>
      <div class="form-group" style="overflow: hidden; border: 1px solid #ccc; padding: 10px">
        <a style="float: left"><b>合格标志号</b></a>
        <text style="float: right">{{ formData.biaozhihao }}</text>
      </div>
      <img
        :src="img1"
        alt="印章图片"
        style="
          max-width: 100%;
          position: absolute;
          top: 200px;
          left: 200px;
          width: 150px;
          height: 150px;
        "
      />
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { useRoute } from 'vue-router'
import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'
import img1 from '@/tupian/yinzhang1.gif'
import { selectchejianjiluById } from '@/api/xiaoxi'

export default defineComponent({
  name: 'Seal',
  setup() {
    const route = useRoute()
    const chejianjiluId = Number(route.query.data)
    let formData = ref({})
    console.log(chejianjiluId)
    selectchejianjiluById(chejianjiluId).then((res) => {
      console.log(res.data.result)
      formData.value = res.data.result
    })
    return {
      img1,
      chejianjiluId,
      formData,
    }
  },
  methods: {
    async exportStyledPdf() {
      const element = this.$refs.contentToConvert
      const canvas = await html2canvas(element, { logging: true })
      const imgData = canvas.toDataURL('image/png')
      const pdf = new jsPDF()
      pdf.addImage(imgData, 'PNG', 10, 10, 190, 0) // 设置宽度为190mm
      pdf.save('是否合格报告.pdf')
    },
  },
})

console.log(JSON.parse(localStorage.getItem('user')).data.userId)
console.log(localStorage.getItem('user'))
</script>

<style scoped>
.styled-content {
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
}
.seal {
  position: relative;
  width: 150px; /* 圆形的直径 */
  height: 150px; /* 圆形的直径 */
  border: 4px solid red; /* 红色边框 */
  border-radius: 50%; /* 使其变为圆形 */
  background-color: transparent; /* 背景透明 */
  color: red; /* 字体颜色为红色 */
  text-align: center;
  font-size: 16px; /* 字体大小 */
  margin: 20px auto;
  display: flex; /* 使用 flexbox 进行布局 */
  flex-direction: column; /* 垂直排列 */
  justify-content: center; /* 垂直居中 */
  align-items: center; /* 水平居中 */
}

.company-name {
  font-size: 14px; /* 公司名称字体大小 */
  margin-bottom: 5px; /* 与合格字的间距 */
}

.qualified {
  font-weight: bold; /* 合格字加粗 */
  font-size: 20px; /* 合格字的大小 */
}
</style>
